<template>
	<view>
		<view class="top">
			<u-navbar title="" back-icon-color="#fff" :border-bottom="false" :background="{background: 'transparent'}"></u-navbar>

			<image class="logo" src="../../static/images/logo.png" mode="widthFix"></image>
		</view>

		<view class="flex justify-center">
			<view class="main">
				<view class="padding">
					<view class="ipt-group">
						<image src="../../static/images/a1.png" mode=""></image>
						<input type="text" class="ipt" v-model="form.mobile" placeholder="用户名/账号/手机号" placeholder-class="ipt-pc" />
					</view>
					<view class="ipt-group">
						<image src="../../static/images/a2.png" mode=""></image>
						<input password class="ipt" v-model="form.password" placeholder="请输入您的密码" placeholder-class="ipt-pc" />
					</view>
				</view>

				<button class="btn margin-tb" @click="mobileLogin">
					登录
				</button>

				<view class="padding-bottom">

				</view>

				<view class="flex justify-around">
					<view @click="$goto('/pages/account/register')">注册账号</view>
					<view @click="$goto('/pages/account/forget')">忘记密码</view>
				</view>

				<!-- <view class="padding-bottom">

				</view>

				<view class="margin-tb-xl flex justify-center through-line">
					<view class="text">
						第三方账号登录
					</view>
					<view class="line">

					</view>
				</view>

				<view class="flex justify-center">
					<image style="width: 66rpx;height: 54rpx;" src="../../static/images/wechat.png" mode="" @click="$goto('')"></image>
				</view> -->
			</view>
		</view>
    
    <!-- #ifdef H5 -->
    <beian />
    <!-- #endif -->
	</view>
</template>

<script>
	import beian from '../../components/beian.vue'
	export default {
	  components: {
	    beian
	  },
		data() {
			return {
				form: {
					mobile: '',
					password: ''
				}
			};
		},
		methods: {
			mobileLogin() {
				this.$u.post('/passport/login', this.form).then(res => {
					let result = res.data.result
					let { token, userinfo } = result
				
					this.$store.commit('setToken', token)
					this.$store.commit('userLogin', userinfo)
					
					this.$msg('登录成功')
					setTimeout(() => {
						this.$goto('/pages/tabbar/tab4', 'tab')
					}, 300)
				})
			},
		}
	}
</script>

<style lang="scss">
	.top {
		height: 564rpx;
		background: url(../../static/images/loginbg.png);
		background-size: 100% 100%;
		position: relative;

		.logo {
			width: 400rpx;
			position: absolute;
			top: 40%;
			left: 50%;
			margin-bottom: 30rpx;
			transform: translate(-50%, -50%);
		}
	}

	.main {
		margin-bottom: 20rpx;
		width: 639rpx;
		height: 800rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 10rpx 10rpx 20rpx rgba(223, 223, 223, 0.5), -10rpx 10rpx 20rpx rgba(223, 223, 223, 0.5);
		border-radius: 28rpx;
		position: relative;
		margin-top: -180rpx;
	}

	.btn {
		width: 561rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: white;
		background:linear-gradient(90deg, #dcbe85 0%,#c69542 100% );
		border-radius: 44rpx;
	}

	.through-line {
		position: relative;

		.text {
			width: 260rpx;
			color: #DBDDE9;
			background-color: white;
			position: relative;
			text-align: center;
			z-index: 10;
			font-size: 24rpx;
		}

		.line {
			position: absolute;
			width: 440rpx;
			height: 1px;
			background-color: #DBDDE9;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 9;
		}
	}

	// copy
	.ipt-group {
		background: rgba(245, 245, 245, 1);
		border-radius: 14rpx;
		width: 100%;
		height: 90rpx;
		margin-top: 36rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		position: relative;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}

		.ipt {
			color: gray;
		}

		.ipt-pc {
			color: #D3D3D3;
		}

		.yzm {
			position: absolute;
			right: 30rpx;
		}
	}

	.btn-wrap {
		position: absolute;
		bottom: 160rpx;
		width: 100%;
		display: flex;
		justify-content: center;

		.btn {
			width: 561rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: white;
			background: rgba(250, 159, 8, 1);
			border-radius: 44rpx;
		}
	}
</style>
